<template>
  <div class="echarts-main">
    <chart ref="polar" :options="polar"></chart>
    <div>
      <div>hahah</div>
      <button @click="preview">预览</button>
      <img :src="imgSrc" alt="">
    </div>
    <div>
    <button @click="clik">截图</button>
    <myTable :tableData="tableList" width="400px" height="300px" id="tableha">
    </myTable>
    <div ref="tableWrap"></div>
    </div>
  </div>
</template>

<script>
import myBar from 'vue-echarts'
import { line2 } from './options/line'
import { bar } from './options/bar'
import { custom } from './options/custom'
import html2canvas from 'html2canvas'
import { tableList } from './data'
export default {
  components: {
    chart: myBar,
    myTable: require('./table/table.vue').default
  },
  data () {
    return {
      imgSrc: '',
      polar: custom,
      tableList: tableList
    }
  },
  mounted () {
    window.document.title = 'hahaha'
  },
  methods: {
    preview () {
      this.imgSrc = this.$refs.polar.getDataURL()
    },
    clik () {
      this.eleToCanvas(document.getElementById('tableha'), (base64src) => { // html2canvas完成div转canvas，canvas.toDataURL完成canvas转base64
        console.log(11, base64src[1])
        this.$refs.tableWrap.appendChild(base64src[0])
      })
    },
    eleToCanvas (ele, cb) {
      html2canvas(ele).then(canvas => {
        const base64src = this.convertCanvasToImage(canvas)
        cb(base64src)
      })
    },
    convertCanvasToImage (canvas) {
        var image = new Image();
	      image.src = canvas.toDataURL("image/png");
        return [image, canvas.toDataURL("image/png")];
    }
  }
}
</script>

<style>
</style>
